<template>
  <ul>
    <TodoItem
      v-for="(todo, index) in todos"
      :key="index"
      :todo="todo"
      :index="index"
      @toggle-completion="emit('toggle-completion', index)"
      @delete-todo="emit('delete-todo', index)"
    />
  </ul>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import TodoItem from './TodoItem.vue';

const props = defineProps({
  todos: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['toggle-completion', 'delete-todo']);
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}
</style>
